﻿@using System.Globalization
@model ProductReviewOverviewModel

<div class="product-reviews-overview d-inline-flex align-items-center flex-wrap"
     @if (Model.TotalReviews > 0)
     {
         <text> itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating" </text>
     }>
    <div class="product-review-box d-inline-block order-1">
        <div class="rating">
            <b-form-rating id="rating-inline-overview-@Model.ProductId" class="p-0" variant="warning" no-border size="sm" show-value precision="2" readonly inline v-model="productreviewsoverview.Model.AvgRating"></b-form-rating>
            <template v-if="productreviewsoverview.Model.TotalReviews > 0">
                <div class="product-review-links order-3">
                    <b-button variant="outline-info" size="sm" class="review-scroll-button" @@click="active = true" href="#review-tab___BV_tab_button__">
                        {{productreviewsoverview.Model.TotalReviews}}
                        @Loc["Reviews.Overview.Reviews"]
                    </b-button>
                </div>
            </template>
            <template v-else>
                <div class="product-no-reviews order-3">
                    <a class="btn btn-sm btn-outline-info" @@click="productreviews.addProductReview()">
                        @Loc["Reviews.Overview.First"]
                    </a>
                </div>
            </template>
            @{
                @* rendering microdata info*@
                <span itemprop="ratingValue" class="d-none">@Model.AvgRating.ToString("0.0", new CultureInfo("en-US"))</span>
                <span itemprop="reviewCount" class="d-none">@Model.TotalReviews</span>
            }
        </div>
    </div>
</div>
<script asp-location="Footer" asp-order="300">
    var productreviewsoverview = new Vue({
        data: function () {
            return {
                Model: null,
            }
        },
        created() {
            this.Model = @Json.Serialize(Model);
        },       
    })
</script>